<template>
  <div>
    <el-dialog
        width="50%"
        v-model="showCommentDialog"
    >
      <template #header>
        <div class="comment-header">
          <span>10条评论</span>
          <div class="sort">
            <span @click="activeIndex=index" :class="{active: index === activeIndex}" v-for="(sort,index) in sortType"
                  :key="index">{{ sort }} </span>
          </div>
        </div>
      </template>

      <div class="comments">
        <comment-item></comment-item>
      </div>

    </el-dialog>
  </div>
</template>

<script setup>
import {useCommentStore} from "@/store/commentStore.js";
import {storeToRefs} from 'pinia'
import {ref} from "vue";
import CommentItem from "@/views/components/article/CommentItem.vue";



const commentStore = useCommentStore();
let {showCommentDialog, sortType, activeIndex} = storeToRefs(commentStore);

let sort = ref(true);
const commentSort = async () => {

}

</script>

<style lang="scss" scoped>
@import "@/styles/var";

.comment-header {
  display: flex;
  justify-content: space-between;
  padding-bottom: 1rem;
  border-bottom: 2px solid #918a8a;
  user-select: none;

  .sort {
    padding-right: 1rem;

    span {
      margin: 0 0.2rem;
      cursor: pointer;
    }

    span.active {
      color: $color-theme;
      border-bottom: #409eff solid 1px;
    }
  }
}

</style>